#{extends 'main.html' /}

#{set title:play.i18n.Messages.get('views.businesses.view.title') /}

#{include 'Businesses/businessOptions.html'/}

<div class="view-data">
	<div class="not-editable"">
		
		 <h1>Informação Básica sobre Clínica/Consultório</h1>
		 <table id='businessBasicInfo'>
		 	
		 	<tr class="view-field">
		 		<td class="field-name">Nome:</td>
		 		<td class="field-value" >
		 			<span data-bind="text: business().name"></span>
		 			<input style="display:none" data-bind="value: business().name" type="text" name="business.name" id="business.name" size="20" maxlength="60" value="" />
		 			<div class="fieldError" id="business.name.error"></div>
		 		</td>	
		 	</tr>
		 			 
			 <tr class="view-field">
			 	<td class="field-name">Morada:</td>
			 	<td class="field-value">
			 		<span data-bind="text: business().address().addressLineOne"></span>
			 		<textarea style="display:none" data-bind="value: business().address().addressLineOne" name="business.address.addressLineOne" id="business.address.addressLineOne"></textarea>
			 		<div class="fieldError" id="business.address.addressLineOne.error"></div>	 	
			 	</td>
			 </tr>
		
			 <tr class="view-field">
			 	<td class="field-name">Código Postal:</td>
			 	<td class="field-value">
			 		<span data-bind="text: business().address().postalCode"></span>
			 		<input style="display:none" data-bind="value: business().address().postalCode" type="text" name="business.address.postalCode" id="business.address.postalCode" size="20" maxlength="60" value="" />
					<div class="fieldError" id="business.address.postalCode.error"></div>
			 	</td>	 	
			 </tr>
		
			 <tr class="view-field">
			 	<td class="field-name">Localidade:</td>
			 	<td class="field-value">
			 		<span data-bind="text: business().address().city"></span>
			 		<input style="display:none" data-bind="value: business().address().city" type="text" name="business.address.city" id="business.address.city" size="20" maxlength="60" value="" />
			 		<div class="fieldError" id="business.address.city.error"></div>
			 	</td>	 	
			 </tr>
					 	
		 	<tr class="view-field">
		 		<td class="field-name">Breve Descrição:</td>	
		 		<td class="field-value">		
		 			<span data-bind="text: business().shortIntroduction"></span>
			 		<textarea style="display:none" data-bind="value: business().shortIntroduction" name="business.shortIntroduction" id="business.shortIntroduction"></textarea>
			 		<div class="fieldError" id="business.shortIntroduction.error"></div>
		 	 	</td>	 			
		 	</tr>
		
			 
		</table>
		
		<div class="inlineOption" id="businessBasicInfoOptions">
		 	<a href="#" class="editOption">Editar</a>
		 	<a href="#" class="saveOption" style="display:none">Guardar</a>
		 	<a href="#" class="cancelOption" style="display:none">Cancelar</a>
		</div>
		
		<h1>Telefones</h1>
		
		<table id="businessPhones">
			<thead>
				<td width="200">Nome</td>
				<td width="100">Telefone</td>
				<td></td>
			</thead>
			<tbody data-bind='template: { name: "phonesTemplate", foreach: businessViewModel.phones() }'>
			</tbody>
			
			
		</table>
	</div>
</div>

<script id="phonesTemplate" type="text/x-jquery-tmpl">
	
	<tr class="view-field" data-bind="id: 'phone'+id">
		<td class="field-value">
			<span data-bind="text: name"></span>
			<input style="display:none" name="phone.name" data-bind="value: name" type="text" size="10" maxlength="60" value="" />
			<div class="fieldError" data-bind="id: 'phone.name.'+id+'.error'"></div>
		</td>
		 <td class="field-value">
		 	<span data-bind="text: phone"></span>
			<input style="display:none" name="phone.phone" data-bind="value: phone" type="text" size="20" maxlength="60" value="" />
			<div class="fieldError" data-bind="id: 'phone.phone.'+id+'.error'"></div>
		 </td>
		 <!--	
		 <td class="field-value">
			<span data-bind="text: description"></span>
			<input style="display:none" name="phone.description" data-bind="value: name" type="text" size="20" maxlength="60" value="" />
		 	<div class="fieldError" data-bind="id: 'phone.description.'+id+'.error'"></div>
		</td>
		-->
		<td class="field-value">
			<div data-bind="id: 'phoneOptions'+id">
				<span><a href="javascript:void(0);" data-bind="onClick: 'businessViewModel.removePhone('+id+')'">Remover</a></span>
		 		<span><a href="javascript:void(0);" data-bind="onClick: 'businessViewModel.editPhone('+id+')'">Editar</a></span>
			</div>

			<div data-bind="id: 'phoneEditOptions'+id" style="display:none">
				<span><a href="javascript:void(0);" data-bind="onClick: 'businessViewModel.savePhone('+id+')'">Gravar</a></span>
		 		<span><a href="javascript:void(0);" data-bind="onClick: 'businessViewModel.cancelEditPhone('+id+')'">Cancelar</a></span>
			</div>

		</td>
	</tr>
</script>


<script type="text/javascript">
	
	


	var currentBusinessId = '${business.id}';
	var deleteUrlTemplate = '/business/{id}/phones/{phoneId}/remove';
	
	var removePhoneRouter = #{jsAction @Businesses.removePhone(':id',':phoneId') /}
	
	//	var router =  {
	//		removePhone : #{jsAction @Businesses.removePhone(':id',':phoneId') /}
	//}
		
	//Create model
	var businessViewModel = {
			phones: ko.observableArray([]),
			business : ko.observable({
				id: ko.observable('${business.id}'),
				shortIntroduction: ko.observable('${business.shortIntroduction}'),
				name: ko.observable('${business.name}'),
				address : ko.observable({
					addressLineOne: ko.observable('${business.address.addressLineOne}'), 
					postalCode: ko.observable('${business.address.postalCode}'),
					city: ko.observable('${business.address.city}')
				})				
			}),
			
			toggleEditablePhone: function(id) {
				$('#phone'+id).children('td').children('span').toggle();
				$('#phone'+id).children('td').children('input').toggle();
				$('#phoneOptions'+id).toggle();
				$('#phoneEditOptions'+id).toggle();
			},
			editPhone: function(id) {
				businessViewModel.toggleEditablePhone(id);
			},
			cancelEditPhone: function(id) {
				//restore values
				
				businessViewModel.toggleEditablePhone(id);
			},
 			getPhoneById: function(id) {
				
				for(var i=0; i< businessViewModel.phones().length; i++) { 
					
					if ( businessViewModel.phones()[i].id == id ) {
						return businessViewModel.phones()[i];
					}
					
				} 
				return null;
			},
			removePhone: function(id) {
				
				var phone = businessViewModel.getPhoneById(id);
				
				if (window.confirm(messages.getMessage("${play.i18n.Messages.get('views.businesses.phones.delete.confirmation')}", {'phone':phone.phone}))) {
					jsUtils.startWorkingStatus();			
					$.delete_(removePhoneRouter({id:currentBusinessId, phoneId:id}), null, function(data) {
						jsUtils.endWorkingStatus();
						//Handle response
						responseBus.handle(data);
						if (data.success) {
							//if server call succeeds, remove it
							
							businessViewModel.phones.remove(function(item) { return item.id == id })	
						} 
					});	
				}
			}
	};
	
	//Initialize phones array
	#{list business.phones, as:'phone'}	
			
				
		businessViewModel.phones.push({ id: '${phone.id}', name: '${phone.name}', phone: '${phone.phone}', description: '${phone.description}'});
	
	#{/list}
	//Bind element
	var elBasicInfo = document.getElementById('businessBasicInfo');	
	var elPhones = document.getElementById('businessPhones');	
	//ko.applyBindings(businessViewModel,elBasicInfo);
	//ko.applyBindings(businessViewModel,elPhones);
	ko.applyBindings(businessViewModel);
	
	
	var businessBasicInfoOptionsUtils = {
		
		toggle : function() {
			//get all span elements within the table
			//set them invisible
			$('#businessBasicInfo span').toggle();
			//get all input, textarea elemens and set the, visible
			$('#businessBasicInfo input').toggle();
			$('#businessBasicInfo textarea').toggle();
			$('#businessBasicInfo input:first:visible').focus();	
			//Toggle options
			$('#businessBasicInfoOptions a.editOption').toggle();
			$('#businessBasicInfoOptions a.cancelOption').toggle();
			$('#businessBasicInfoOptions a.saveOption').toggle();
		}	
	};

	
	$('#businessBasicInfoOptions a.saveOption').click(function() {
		jsUtils.startWorkingStatus();
		
		//jsUtils.showResultStatus('hey there', jsUtils.messageType.success);
		//Make ajax call to edit
		$.post('@{Businesses.save(business.id)}', ko.toJSON(businessViewModel.business), function(data) {
			jsUtils.endWorkingStatus();
			//Handle response
			responseBus.handle(data);
			if (data.success) {
				businessBasicInfoOptionsUtils.toggle();
			} 
		} );
		return false;
		
	});
	
	
	//Associate events
	//BusinessBasicInfoOptions edit
	$('#businessBasicInfoOptions a.editOption').click(function() {
		businessBasicInfoOptionsUtils.toggle();
		return false;
		
	});
	
	//BusinessBasicInfoOptions cancel
	$('#businessBasicInfoOptions a.cancelOption').click(function() {
		businessBasicInfoOptionsUtils.toggle();
		return false;
	});
</script>

